import { Component } from 'react';
import './Xm.less';
import Tabs  from 'uxcore-tabs';
import Table from 'uxcore-table';
import EmptyData from 'uxcore-empty-data';
import Matrix from 'uxcore-matrix';
import { URLS } from './../../app/variables';

export default class Xm extends Component {

  constructor(props) {
    super(props);
    this.customRender = this.customRender.bind(this);
  }

  customRender(cellData) {
    const style = {
      lineHeight: '50px',
      textAlign: 'left',
      padding: '0 20px',
      overflow: 'hidden',
    };
    if (cellData.type === 'title') {
      style.textAlign = 'right';
      style.color = 'rgba(0, 0, 0, 0.8)';
      style.fontWeight = 'bold';
      style.background = 'rgba(31,56,88,0.04)';
    }
    let content = cellData.text;
    if (cellData.type === 'link') {
      content = <a>{content}</a>;
    }
    return (
      <div style={style}>
        {content}
      </div>
    );
  }

  render() {

    const data = {
      data: [
        {x: 0, y: 0, row: 1, col: 1, type: 'title', text: '项目名称'},
        {x: 1, y: 0, row: 1, col: 3, type: 'normal', text: this.props.data.name},
        {x: 0, y: 1, row: 1, col: 1, type: 'title', text: '项目编码'},
        {x: 1, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.coding},
        {x: 2, y: 1, row: 1, col: 1, type: 'title', text: '资金来源'},
        {x: 3, y: 1, row: 1, col: 1, type: 'normal', text: this.props.data.zjlyfl},
        {
          x: 0,
          y: 2,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[0] && this.props.zjly[0].zjlyfl + this.props.zjly[0].zjlx
        },
        {
          x: 1,
          y: 2,
          row: 1,
          col: 1,
          type: 'normal',
          text: this.props.zjly[0] && this.props.zjly[0].rmbJinE + this.props.zjly[0].danWei
        },
        {
          x: 2,
          y: 2,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[0] && this.props.zjly[0].zjlyfl + this.props.zjly[0].zjlx + '比例'
        },
        {x: 3, y: 2, row: 1, col: 1, type: 'normal', text: this.props.zjly[0] && this.props.zjly[0].biLi + '%'},
        {
          x: 0,
          y: 3,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[1] && this.props.zjly[1].zjlyfl + this.props.zjly[1].zjlx
        },
        {
          x: 1,
          y: 3,
          row: 1,
          col: 1,
          type: 'normal',
          text: this.props.zjly[1] && this.props.zjly[1].rmbJinE + this.props.zjly[1].danWei
        },
        {
          x: 2,
          y: 3,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[1] && this.props.zjly[1].zjlyfl + this.props.zjly[1].zjlx + '比例'
        },
        {x: 3, y: 3, row: 1, col: 1, type: 'normal', text: this.props.zjly[1] && this.props.zjly[1].biLi + '%'},
        {
          x: 0,
          y: 4,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[2] && this.props.zjly[2].zjlyfl + this.props.zjly[2].zjlx
        },
        {
          x: 1,
          y: 4,
          row: 1,
          col: 1,
          type: 'normal',
          text: this.props.zjly[2] && this.props.zjly[2].rmbJinE + this.props.zjly[2].danWei
        },
        {
          x: 2,
          y: 4,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[2] && this.props.zjly[2].zjlyfl + this.props.zjly[2].zjlx + '比例'
        },
        {x: 3, y: 4, row: 1, col: 1, type: 'normal', text: this.props.zjly[2] && this.props.zjly[2].biLi + '%'},
        {
          x: 0,
          y: 5,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[3] && this.props.zjly[3].zjlyfl + this.props.zjly[3].zjlx
        },
        {
          x: 1,
          y: 5,
          row: 1,
          col: 1,
          type: 'normal',
          text: this.props.zjly[3] && this.props.zjly[3].rmbJinE + this.props.zjly[3].danWei
        },
        {
          x: 2,
          y: 5,
          row: 1,
          col: 1,
          type: 'title',
          text: this.props.zjly[3] && this.props.zjly[3].zjlyfl + this.props.zjly[3].zjlx + '比例'
        },
        {x: 3, y: 5, row: 1, col: 1, type: 'normal', text: this.props.zjly[3] && this.props.zjly[3].biLi + '%'},
        {x: 0, y: 6, row: 1, col: 1, type: 'title', text: '总投资额'},
        {x: 1, y: 6, row: 1, col: 3, type: 'normal', text: this.props.data.jhtzze + '(万元)'},

      ]
    };

    const lxpwProps = {
      size: 'small',
      showColumnPicker: false,
      showPager: false,
      jsxdata: {
        "data": this.props.lxpw
      },
      jsxcolumns: [
        {dataKey: 'pzwh', title: '立项文号', width: 185, ordered: false},
        {dataKey: 'pzsj', title: '批准时间', width: 190, ordered: false},
        {dataKey: 'jhtze', title: '计划投资额（万元）', width: 180, ordered: false},
        {dataKey: 'pznr', title: '立项文件名称', width: 440, ordered: false},
      ],
    }

    return (
      <div className="mod-xm">
        <Tabs defaultActiveKey="1" type="small">
          <Tabs.TabPane tab="基本信息" key="1">
            <div className="col_1 xm-table-div" style={{height:525}}>
              <Matrix
                data={data}
                cellWidth={[190,290,200,290]}
                render={this.customRender}
              />

              <div className="xm-table-div">
                <Table {...lxpwProps} ref="lxpwgrid"/>
              </div>
            </div>
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}
